<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
 * Demo2:拖拽上传
 */
        #drop_zone {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<h3>Demo2:拖拽上传</h3>

<div id="drop_zone">Drop files here</div>
<output id="list"></output>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    /*
     * Demo2:拖拽上传
     */
    // 必须阻止dragenter和dragover事件的默认行为，这样才能触发 drop 事件
    function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();

        var files = evt.dataTransfer.files; // 文件对象

        // 处理多文件
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
            output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                f.size, ' bytes, last modified: ',
                f.lastModifiedDate.toLocaleDateString(), '</li>');
        }
        // 显示文件信息
        document.getElementById('list').innerHTML = output.join('');
    }

    function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy';
    }

    // Setup the dnd listeners.
    var dropZone = document.getElementById('drop_zone');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', handleFileSelect, false);

</script>
</body>
</html>